<template>
	<view class="phone">
		<view class="status_bar">  
			<view class="top_view"></view>  
		</view> 
		<view class="phonebox">
			<view class="closebtn" @click="returnbtn">&#xe608;</view>
			<view class="bindtitle">绑定手机号</view>
			<view class="zhanghao">（为了您的账号安全）</view>
			<view class="phonenub">
				<view class="zuobod">
					<input type="text" class="bindph cominput" placeholder="输入11位手机号码" v-model="phonenub">
					<text class="huoqu" v-bind:class="{'nobtn':istrue}" @click="tosendfn">{{istrue? showtime+'s后点击':'获取验证码'}}</text>
				</view>
			</view>
			<view class="yzm">
				<view class="zuobod">
					<input type="text" class="yzmnub cominput" v-model="phonese" placeholder="输入验证码" />
				</view>
			</view>
			<view class="bindtab" @click="bindphone">绑定</view>
		</view>
	</view>
</template>

<script>
	import {common} from '@/common/publish.js'
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				istrue:false,
				phonenub:'',
				phonese:'',
				showtime:60,
				qurendianji:false,
				userInfo:{}
			};
		},
		onLoad(event) {
			var that = this;
			uni.getStorage({
				key:'uerInfo',
				success(res) {
					that.userInfo = res.data;
				}
			})
		},
		methods:{
			returnbtn(){
				uni.switchTab({
					url: '/pages/ucenter/ucenter'
				});
			},
			tosendfn(){
				var that = this;
				if(!this.istrue){
					var reg =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
					this.phonenub = this.phonenub.trim();
					var isphone = reg.test(this.phonenub);
					console.log(this.phonenub)
					if(isphone){
						uni.request({
							url:common.csurl2+'/app/user/sendMes.json',
							data:{phone:that.phonenub},
							success(res) {
								if(res.ret){
									
								}
							}
						})
						that.istrue = true;
						that.qurendianji = true;
						var times = setInterval(()=>{
							that.showtime--;
							if(that.showtime == 0){
								clearInterval(times);
								that.showtime = 60;
								that.istrue = false;
							}
						},1000)
					}else{
						uni.showToast({
							title: '请输入正确的手机号',
							icon:'none',
							duration: 1500
						});
					}
				}
			},
			bindphone(){
				var that = this;
				if(this.qurendianji){
					var reg =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
					this.phonenub = this.phonenub.trim();
					var isphone = reg.test(this.phonenub);
					if(isphone){
						if(this.phonese){
							uni.showToast({
								title: '绑定中请稍后',
								icon:'none',
								duration: 1500
							});
							uni.request({
								url:common.csurl2+'/app/user/addPhone.json',
								data:{
									phone:this.phonenub,
									printCode:this.phonese,
									unionId:this.userInfo.unionId
								},
								success(res) {
									if(res.data.ret){
										
										uni.setStorage({
											key: 'islogin',
											data: true,
											success:()=>{
												that.$store.commit('isloginfn',true);
												uni.switchTab({
													url: '/pages/ucenter/ucenter'
												});
											}
										});
										
									}else{
										uni.showToast({
											title: res.data.errmsg,
											icon:'none',
											duration: 1500
										});
									}
								}
							})
						}else{
							uni.showToast({
								title: '请输入验证码',
								icon:'none',
								duration: 1500
							});
						}
					}else{
						uni.showToast({
							title: '请输入正确的手机号',
							icon:'none',
							duration: 1500
						});
					}
				}else{
					uni.showToast({
						title: '请先获取验证码',
						icon:'none',
						duration: 1500
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('../../static/font/iconfont.ttf') format('truetype');
	}
	page{
		background-color: $bgcolor;
		
	}
	.phonenub{
		width:590upx;
		margin:80upx auto 0;
		border-bottom:1px solid #00629d;
		
	}
	.yzm{
		width:590upx;
		margin:40upx auto 0;
		border-bottom:1px solid #00629d;
	}
	.zuobod{
		width:100%;
		border-bottom:1px solid #00a4e1;
	}
	.cominput{
		font-size:32upx;
		line-height:80upx;
		color:#959595;
		height:80upx;
	}
	.bindph{
		width:400upx;
		display:inline-block;
		vertical-align: middle;
	}
	.huoqu{
		display:inline-block;
		width:190upx;
		text-align:right;
		font-size:32upx;
		color:#00a5e1;
		line-height:80upx;
		vertical-align: middle;
	}
	.nobtn{
		color:#959595;
	}
	.bindtab{
		color:#fff;
		margin:0 auto;
		margin-top:100upx;
		width:560upx;
		height:90upx;
		line-height:90upx;
		text-align:center;
		font-size:40upx;
		background: linear-gradient(rgb(0,164,225), rgb(0,98,157));
		border-radius:45upx;
	}
	.closebtn{
		width: 40upx;
		height: 40upx;
		line-height: 40upx;
		font-size: 34upx;
		color: $timecolor;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
		padding:40upx 40upx;
	}
	.bindtitle{
		font-size:42upx;
		line-height:60upx;
		color: $titlecolor;
		text-align:center;
		margin-top:40upx;
		letter-spacing:8upx;
	}
	.zhanghao{
		text-align:center;
		font-size:32upx;
		color:$timecolor;
		line-height:50upx;
	}
	.status_bar {  
		height: var(--status-bar-height);  
		width: 100%;  
		background-color:  $bgcolor;  
	}  
	.top_view {  
		height: var(--status-bar-height);  
		width: 100%;  
		position: fixed;  
		background-color:  $bgcolor;  
		top: 0;  
		z-index: 999;  
	}
</style>
